<script setup>
import BaseChart from '@/components/chart/BaseChart.vue'
import { computed } from 'vue'

const props = defineProps({
  charData: {
    type: Array,
    default: () => {
      return [
        { name: '风险1', max: 300, sdata: 60 },
        { name: '风险1', max: 300, sdata: 60 }, // 标签设置为红色
        { name: '风险1', max: 300, sdata: 50 },
        { name: '风险1', max: 300, sdata: 90 },
        { name: '风险1', max: 300, sdata: 150 },
      ]
    },
  },
})
const extractSdata = (array) => {
  return array.map((item) => item.sdata)
}

const chartOptions = computed(() => {
  return {
    title: {
      text: '',
    },
    legend: {
      show: false,
    },
    radar: [
      {
        indicator: props.charData,
        center: ['50%', '50%'],
        radius: 80,
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
        axisName: {
          formatter: function (value, indicator) {
            return `${value} ${indicator.sdata}`
          },
          color: '#428BD4',
          rich: {
            a: {
              color: 'red',
              lineHeight: 10,
            },
            b: {
              backgroundColor: {
                image: 'xxx/xxx.jpg',
              },
              height: 40,
            },
            x: {
              fontSize: 18,
              fontFamily: 'Microsoft YaHei',
              borderColor: '#449933',
              borderRadius: 4,
            },
          },
        },
        splitArea: {
          areaStyle: {
            color: ['#1f3e59', '#2e4357'],
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 10,
          },
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(52, 80, 96, 0.2)',
          },
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(173,174,182,0.1)',
          },
        },
      },
    ],
    series: [
      {
        type: 'radar',
        smooth: 3,
        emphasis: {
          lineStyle: {
            width: 4,
          },
        },
        itemStyle: {
          borderType: 'dashed',
        },
        data: [
          {
            value: extractSdata(props.charData),
            name: '',
            symbol: 'none',
            areaStyle: {
              color: '#1584d3',
            },
            lineStyle: {
              width: 3,
              color: '#61d6fc',
            },
          },
        ],
      },
    ],
  }
})
</script>

<template>
  <div class="w-full h-full">
    <BaseChart :chartOptions="chartOptions" />
  </div>
</template>

<style scoped></style>
